<template>
  <div class="app-main-container tabpdding">
    <el-tabs v-model="tabActiveName" @tab-click="handleClick">
      <el-tab-pane :label="translate('jjrpz')" name="first">
        <div class="doumee-table-buttons">
          <el-button v-if="meta.indexOf('OptionDefaultAdd') > -1" type="primary" @click="toHolidayConfigAdd">{{ translate("add") }}</el-button>
          <el-switch v-model="couponsInfo.value" class="ml10" style="zoom: 1.5" active-value="1" inactive-value="0" @change="toConfigUpdate($event, couponsInfo.id, 'value')" />
          <span class="placeholder9 ml10">{{ translate("openTbsstb") }}</span>
        </div>
        <el-table ref="table" v-loading="listLoading" :data="holidayConfigList" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
          <el-table-column align="center" :label="translate('jjrlb')" prop="name" />
          <el-table-column align="center" :label="translate('openFlag')">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isOpen" :active-value="'1'" :inactive-value="'0'" :disabled="meta.indexOf('OptionDefaultEdit') == -1" @change="toConfigUpdate($event, scope.row.id, 'isOpen')" />
            </template>
          </el-table-column>
          <el-table-column align="center" :label="translate('enableFlag')">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.isAllow" :active-value="'1'" :inactive-value="'0'" :disabled="meta.indexOf('OptionDefaultEdit') == -1" @change="toConfigUpdate($event, scope.row.id, 'isAllow')" />
            </template>
          </el-table-column>
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div v-if="meta.indexOf('OptionDefaultDel') > -1" class="flex-cc">
                <el-button type="text" style="color: red" @click="toHolidayConfigDelete(scope.row.id)">{{ translate("del") }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex-cc doumee-pagination">
          <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page :current-page.sync="pagination.page" @current-change="currentChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="meta.indexOf('VenueConfigList') > -1" :label="translate('payConfig')" name="second">
        <el-tabs v-model="tabName" tab-position="left" @tab-click="handleClickb">
          <el-tab-pane :label="translate('shopsConfig')" name="first">
            <div class="warnningTip" @click="handleMini">
              {{ translate("shopPayCon") }}
            </div>
            <el-table v-loading="listLoading" :data="payConfigList" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
              <el-table-column align="center" :label="translate('payMethod')" prop="name" />
              <el-table-column align="center" :label="translate('enableFlag')">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.isAllow" :active-value="'1'" :inactive-value="'0'" :disabled="meta.indexOf('OptionDefaultEdit') == -1" @change="toConfigUpdate($event, scope.row.id, 'isAllow')" />
                </template>
              </el-table-column>
              <el-table-column align="center" :label="translate('payDesc')" prop="channel" show-overflow-tooltip />
              <el-table-column :label="translate('handle')" align="center">
                <template slot-scope="scope">
                  <div class="flex-cc">
                    <el-button v-if="
                        scope.row.isAllow == '1' &&
                          (scope.row.value == '01' ||
                            scope.row.value == '03' ||
                            scope.row.value == '04' ||
                            scope.row.value == '08' ||
                            scope.row.value == '02' ||
                            scope.row.value == '06' ||
                            scope.row.value == '07')
                      " type="primary" @click="editShow(scope.row)">{{ translate("config") }}</el-button>
                    <!-- <span
                      v-if="
                        scope.row.isAllow == '0' &&
                          scope.row.value != '03' &&
                          scope.row.value != '04' &&
                          scope.row.value != '08'
                      "
                    >-</span> -->
                  </div>
                </template>
              </el-table-column>
            </el-table>

            <div class="flex-cc doumee-pagination">
              <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page :current-page.sync="pagination.page" @current-change="currentChange" />
            </div>
          </el-tab-pane>
          <template v-if="meta.indexOf('VenueConfigDetailList') > -1">
            <el-tab-pane v-for="item in venueList" :key="item.id" :label="item.name" :name="item.id">
              <div class="warnningTip" @click="handleMini">
                {{ translate("dcgywxysks") }}
              </div>
              <el-table v-loading="listLoading" :data="venuePayConfigList" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
                <el-table-column align="center" :label="translate('payConfig')" prop="name" />
                <el-table-column align="center" :label="translate('payDesc')" prop="channel" />
                <el-table-column :label="translate('handle')" align="center">
                  <template slot-scope="scope">
                    <div class="flex-cc">
                      <el-button v-if="meta.indexOf('UpdateVenueConfigDetailList') > -1" type="primary" @click="editShowb(scope.row)">{{ translate("config") }}</el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane></template>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane :label="translate('venueDeviceConfig')" name="third">
        <div class="device-list">
          <div v-if="meta.indexOf('OptionDefaultEdit') > -1" class="device-item">
            <transition name="fade">
              <Cropper v-if="dialogCropperVisible" :option-img="optionImg" :fileinfo="fileinfo" use-type="VENUE_IMG" :fixed-number="[32, 32]" @formSubmit="cropperSubmit" @formClose="cropperClose" />
            </transition>
            <el-upload class="device-uploader" :action="uploadFileUrl" :data="uploadData" :show-file-list="false" :auto-upload="false" accept=".jpg,.png" :on-change="addFileChange">
              <i class="el-icon-plus uploader-icon" />
              <div v-show="deviceConfigAdd.image" class="file" :style="'background-image: url(' + deviceConfigAdd.image + ')'">
                <div class="delete">
                  <i class="el-icon-delete icon" @click.stop="deleteDeviceConfigAddImage" />
                </div>
              </div>
            </el-upload>
            <div class="name">
              <el-input v-model="deviceConfigAdd.configName" type="text" :placeholder="translate('qsr')" class="name" />
              <el-button v-preventReClick size="small" type="primary" class="save-button" @click="toVenueConfigAdd">{{ translate("save") }}</el-button>
            </div>
          </div>
          <div v-for="(item, index) in deviceConfigList" :key="index" class="device-item">
            <div class="image" :style="'background-image: url(' + item.value + ')'" />
            <div class="name">
              <div class="value">{{ item.name }}</div>
              <el-button v-if="meta.indexOf('OptionDefaultDel') > -1" size="small" type="danger" class="save-button" @click="toVenueConfigDelete(item.id)">{{ translate("del") }}</el-button>
            </div>
          </div>
          <!-- flex 布局 占位 -->
          <div class="holder" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="translate('htUserDefaultPsd')" name="fourth">
        <el-form v-if="tabActiveName == 'fourth'" label-width="auto" :inline="false" size="normal" class="default-password-form">
          <el-form-item v-for="item in defaultPasswordConfig" :key="item.id" :label="translate('defaultPsd')">
            <el-input v-model="item.value" type="text" :placeholder="translate('psdDesc')" class="name" />
          </el-form-item>
          <el-form-item>
            <el-button v-if="meta.indexOf('OptionDefaultEdit') > -1" v-preventReClick size="small" type="primary" class="save-button" @click="toUpdateDefaultPassword(4)">{{ translate("save") }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="translate('kfdh')" name="six">
        <el-form v-if="tabActiveName == 'six'" label-width="auto" :inline="false" size="normal" class="default-password-form">
          <el-form-item v-for="item in defaultPasswordConfig" :key="item.id" :label="translate('kfdh')">
            <el-input v-model="item.value" type="text" :placeholder="translate('qsr')" class="name" />
          </el-form-item>
          <el-form-item>
            <el-button v-if="meta.indexOf('OptionDefaultEdit') > -1" v-preventReClick size="small" type="primary" class="save-button" @click="toUpdateDefaultPassword(11)">{{ translate("save") }}</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane :label="translate('commoneConsume')" name="fifth">
        <div class="doumee-table-buttons">
          <el-button v-if="meta.indexOf('OptionDefaultAdd') > -1" type="primary" @click="toGeneralConsumptionAdd">{{ translate("add") }}</el-button>
        </div>
        <el-table v-loading="listLoading" :data="generalConsumptionConfigList" element-loading-text="Loading" border fit :header-row-class-name="'table-header'" class="doumee-element-table">
          <el-table-column align="center" :label="translate('mingcheng')" prop="name" />
          <el-table-column :label="translate('handle')" align="center">
            <template slot-scope="scope">
              <div v-if="meta.indexOf('OptionDefaultDel') > -1" class="flex-cc">
                <el-button type="text" style="color: red" @click="toGeneralConsumptionDelete(scope.row.id)">{{ translate("del") }}</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex-cc doumee-pagination">
          <el-pagination background layout="prev, pager, next" :total="total" hide-on-single-page :current-page.sync="pagination.page" @current-change="currentChange" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="translate('xieyiConfig')" name="seven">
        <!-- code,AGREEMENT_ALBUM_SECRET（运动抓拍隐私协议）和AGREEMENT_ALBUM_SERVICE（运动抓拍服务协议） -->
        <el-tabs v-if="tabActiveName == 'seven'" v-model="sportActiveName">
          <el-tab-pane v-for="(item, index) in agreementList" :key="item.id" :label="item.name">
            <el-form :ref="'ruleForm' + index" class="doumee-form" :model="agreementContent" :rules="rules" :label-width="translate('xieyiContent').length + 3 + 'em'" label-suffix="：">
              <el-form-item :label="translate('xieyiContent')" prop="value">
                <!-- <WangEditor
                  :ref="'xieyiContent' + 'sportActiveName'"
                  :value="item.value"
                  @input="(e) => (item.value = e)"
                /> -->
                <quill-editor ref="myTextEditor" v-model="item.value" :placeholder="$t('message.qsrnr')" class="myQuillEditor" :options="quillOption" />
              </el-form-item>
              <div class="line-style" />
              <el-form-item>
                <el-button v-preventReClick type="primary" @click="onSubmit(item)">{{ translate("tj") }}</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
    <!-- 新增节假日配置 -->
    <el-dialog :close-on-click-modal="modalDialog" :lose-on-press-escape="modalDialog" :title="translate('xzjjrpz')" :visible.sync="showHolidayConfigAdd">
      <el-form ref="refForm" :rules="rules" :model="formHolidayConfigAdd" label-width="auto">
        <!-- <el-form-item label="节假日名称">
          <el-input v-model="formHolidayConfigAdd.name" autocomplete="off" />
        </el-form-item> -->
        <el-form-item :label="translate('selTime')" prop="date">
          <el-date-picker v-model="formHolidayConfigAdd.date" type="daterange" :range-separator="translate('to')" :start-placeholder="translate('ksrq')" :end-placeholder="translate('jsrq')" />
        </el-form-item>
        <el-form-item :label="translate('enableFlag')">
          <el-switch v-model="formHolidayConfigAdd.isAllow" :active-value="'1'" :inactive-value="'0'" />
        </el-form-item>
        <el-form-item :label="translate('openFlag')">
          <el-switch v-model="formHolidayConfigAdd.isOpen" :active-value="'1'" :inactive-value="'0'" />
          <span style="margin-left: 10px; color: #8d8c8c; font-size: 12px">{{
            translate("jjrbkf")
          }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showHolidayConfigAdd = false">{{
          translate("cancel")
        }}</el-button>
        <el-button v-preventReClick type="primary" :loading="holidayLoading" @click="confirmHolidayConfigAdd">{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
    <!-- 新增通用消费配置 -->
    <el-dialog :close-on-click-modal="modalDialog" :lose-on-press-escape="modalDialog" :title="translate('commonConsumeTypeAdd')" :visible.sync="showGeneralConsumptionAdd">
      <el-form :model="generalConsumptionAdd" label-width="auto">
        <el-form-item :label="translate('commoneConsumeName')">
          <el-input v-model="generalConsumptionAdd.name" type="text" :placeholder="translate('qsr')" class="name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showGeneralConsumptionAdd = false">{{
          translate("cancel")
        }}</el-button>
        <el-button v-preventReClick :loading="commonConsumeLoading" type="primary" @click="confirmGeneralConsumptionAdd">{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
    <el-dialog v-if="showPayEdit" :close-on-click-modal="modalDialog" :lose-on-press-escape="modalDialog" :title="payConfigTitle" :visible.sync="showPayEdit" width="800px">
      <el-form ref="ruleForm" label-suffix="：" label-width="auto">
        <el-form-item v-for="(item, index) in payParam" :key="index" :label="item.name">
          <el-switch v-if="item.code == 'MEMBER_CARD_PAY'" v-model="item.value" active-value="1" inactive-value="0" />
          <el-input v-else v-model="item.value" />
        </el-form-item>
        <template v-if="payParam.length === 0 && zfpzInfo.code">
          <el-form-item :label="translate('payName')">
            <el-input v-model="zfpzInfo.name" />
          </el-form-item>
          <el-form-item :label="translate('payDesc')">
            <el-input v-model="zfpzInfo.channel" />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showPayEdit = false">{{
          translate("cancel")
        }}</el-button>
        <el-button v-preventReClick :loading="payConfigLoading" type="primary" @click="formOnSubmit('ruleForm')">{{ translate("enter") }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  configList,
  configUpdate,
  configAdd,
  configDelete,
  uploadFile,
  venueList,
  configDetails,
  configUpdateForPayParams,
  updateVenueConfigDetailList,
  venueConfigDetailList,
  venueConfigList
} from '@/api'
import { dateFormat } from '@/utils/validate'
// // import WangEditor from '@/components/quillOption'
import { quillEditor } from 'vue-quill-editor'
import quillConfig from '@/api/sc.js'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import Cropper from '@/components/cropper'
export default {
  name: 'OptionDefault',
  components: {
    // WangEditor,
    quillEditor,
    Cropper
  },
  data () {
    return {
      payPassword: {
        payPasswordFlag: false
      },
      quillOption: quillConfig,
      couponsInfo: {
        value: '1'
      },
      venuePayConfigList: [],
      modalDialog: this.$store.state.app.dialog,
      holidayLoading: false,
      payConfigLoading: false,
      labelWidth: '',
      commonConsumeLoading: false,
      optionImg: '',
      fileinfo: {},
      dialogCropperVisible: false,
      meta: [],
      uploadFileUrl: uploadFile,
      uploadData: {
        folder: 'VENUE_IMG',
        type: ''
      },
      uploadParam: {},
      holidayConfigList: [],
      payConfigList: [],
      deviceConfigList: [],
      defaultPasswordConfig: [],
      total: 0,
      listLoading: true,
      tabActiveName: 'first',
      tabName: 'first',
      configType: 1,
      configName: 'holidayConfigList',
      configCode: '',
      agreementContent: {},
      agreementList: [],
      showPayEdit: false,
      payVen: false,
      payConfigTitle: this.translate('payConfig'),
      payEditType: 0,
      payParam: [],
      zfpzInfo: {},
      showHolidayConfigAdd: false,
      formHolidayConfigAdd: {
        name: '',
        date: '',
        isOpen: '1',
        isAllow: '1',
        type: '1'
      },
      generalConsumptionConfigList: [],
      showGeneralConsumptionAdd: false,
      generalConsumptionAdd: {
        name: '',
        type: '72'
      },
      deviceConfigAdd: {
        configName: '',
        configPicture: ''
      },
      pagination: {
        firstQueryTime: new Date(),
        page: 1,
        rows: 10
      },
      venueList: [],
      quillOption: quillConfig,
      sportActiveName: 0,
      param: {},
      rules: {
        date: [{ required: true, message: this.translate('qxzsj'), trigger: 'blur' }],
        value: [{ required: true, message: this.translate('contentPlace'), trigger: 'blur' }]
      }
    }
  },
  created () {
    this.meta = this.$route.meta.buttons || []
    this.getZd()
    this.getConfigList()
    this.getVenue()
  },
  mounted () {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout()
    })
  },
  methods: {
    fwbChange (type, e) {
      console.log(6, type, e)
    },
    getVenue () {
      this.tabName = 'first'
      venueList({ param: {} }).then(res => {
        this.venueList = res.recordList || []
      })
      venueConfigList({ param: { type: '2' } }).then((res) => {
        if (res.errorCode !== '000000') return
        this.venuePayConfigList = res.recordList || []
      })
    },
    formOnSubmit () {
      const paramList = [...this.payParam]
      if (paramList && paramList.length > 0) {
        let obj = {}
        paramList.forEach((config) => {
          if (!config.value && !obj.name) {
            obj = config
          }
        })
        if (obj.name) {
          this.$message.warning(this.translate('qsr') + obj.name)
          return false
        }
        this.payConfigLoading = true
        if (this.payVen) {
          updateVenueConfigDetailList({
            param: {
              dataList: paramList,
              venueId: this.tabName
            }
          }).then((res) => {
            this.payConfigLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.translate('configScs'))
              this.showPayEdit = false
            }
          }).catch(() => {
            this.payConfigLoading = false
          })
        } else {
          configUpdateForPayParams({
            param: {
              paramList
            }
          }).then((res) => {
            this.payConfigLoading = false
            if (res.errorCode === '000000') {
              this.$message.success(this.translate('configScs'))
              this.showPayEdit = false
            }
          }).catch((error) => {
            this.payConfigLoading = false
            if (error.code === 'ECONNABORTED') {
              this.payConfigLoading = false
            }
          })
        }
      } else {
        const param = { ...this.zfpzInfo }
        if (!param.name) {
          this.$message.warning(this.translate('qsrzfmc'))
          return
        }
        if (!param.channel) {
          this.$message.warning(this.translate('qsrzfsm'))
          return
        }
        configUpdate({ param }).then((res) => {
          if (res.errorCode !== '000000') return
          this.$message.success(this.translate('editScs'))
          this.showPayEdit = false
          this.getAgreement()
        })
      }
    },
    editShow (row) {
      this.payEditType =
        row.value === '04'
          ? 2
          : row.value === '08'
            ? 3
            : row.value === '01'
              ? 4
              : row.value === '03'
                ? 1
                : row.value
      this.payConfigTitle = row.name + this.translate('config')
      this.payVen = false
      if (row.value === '02' || row.value === '06' || row.value === '07') {
        this.showPayEdit = true
        this.payParam = []
        this.zfpzInfo = { ...row }
        this.labelWidth = '6em'
      } else {
        this.getPayInfo(this.payEditType)
      }
    },
    editShowb (row) {
      this.payEditType =
        row.value === '03'
          ? 1
          : row.value === '04'
            ? 2
            : ''
      this.getPayInfob(this.payEditType)
      this.payConfigTitle = row.name + this.translate('config')
      this.payVen = true
    },
    getPayInfob (payType, falg = true) {
      venueConfigDetailList({
        param: { type: '8', payType, venueId: this.tabName }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.showPayEdit = falg
        this.payParam = res.recordList
      })
    },
    getPayInfo (payType, falg = true) {
      configDetails({
        param: { type: '8', payType }
      }).then((res) => {
        if (res.errorCode !== '000000') return
        this.showPayEdit = falg
        this.payParam = res.recordList
        const arr = res.recordList
        let labelWidth = 2
        arr.forEach(s => {
          if (s.name.length > labelWidth) {
            labelWidth = s.name.length
          }
        })
        this.labelWidth = labelWidth + 2 + 'em'
      })
    },
    fineSuccess () {

    },
    currentChange (page) {
      this.$set(this.pagination, 'page', page)
      this.getConfigList()
    },
    // 获取配置列表
    getZd () {
      // debugger
      configList({
        param: { type: '21', code: '' }
      }).then((res) => {
        if (res.recordList.length > 0) {
          this.couponsInfo = res.recordList[0]
        }
      })
    },
    getConfigList () {
      const { configType: type, configName: name, configCode: code } = this
      // debugger
      configList({
        pagination: this.pagination,
        param: { type, code }
      }).then((res) => {
        this.listLoading = false
        this[name] = res.recordList
        this.total = res.totalCount
        if (res.recordList.length) {
          this.agreementList = res.recordList
          this.agreementContent = res.recordList[0]
        }
        console.log(name, this[name])
      })
    },
    getAgreement () {
      const { configType: type, configName: name, configCode: code } = this
      configList({ pagination: this.pagination, param: { type, code } }).then(
        (res) => {
          this.listLoading = false
          this[name] = res.recordList
          this.total = res.totalCount
          if (res.recordList.length) {
            const item = res.recordList[0]
            if (item.code === code) {
              this.agreementContent = item
            }
          }
          // console.log(count)
        }
      )
    },
    handleMini () {
      this.$router.push('/application/miniFinish')
    },
    // 删除获取配置列表
    getdelConfigList () {
      const { configType: type, configName: name } = this
      configList({ pagination: this.pagination, param: { type } }).then(
        (res) => {
          this.listLoading = false
          this[name] = res.recordList
          this.total = res.totalCount
        }
      )
    },
    // 修改节假日配置、支付配置
    toConfigUpdate (e, id, paramName) {
      const { configType: type } = this
      configUpdate({ param: { id, type: paramName === 'value' ? '21' : type, [paramName]: e } }).then((res) => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('editScs'))
      })
    },
    // 新增节假日配置
    toHolidayConfigAdd () {
      this.showHolidayConfigAdd = true
    },
    // 确认新增节假日配置
    confirmHolidayConfigAdd () {
      const that = this
      const { formHolidayConfigAdd: param } = this
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          param.startDate = dateFormat(this.formHolidayConfigAdd.date[0])
          param.endDate = dateFormat(this.formHolidayConfigAdd.date[1])
          that.holidayLoading = true
          configAdd({ param }).then((res) => {
            that.holidayLoading = false
            if (res.errorCode === '000000') {
              that.$message.success(this.translate('addcg'))
              that.showHolidayConfigAdd = false
              that.getConfigList()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 删除节假日配置
    toHolidayConfigDelete (id) {
      this.$confirm(this.translate('xiangDelPlace'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configDelete({ param: { id } }).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            // this.pagination.page = 1
            this.getdelConfigList(this.pagination.page)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.translate('canceledDel')
          })
        })
    },
    // 场馆设施上传图片成功
    uploadSuccess (res, file, fileList) {
      if (res.success) {
        this.$set(this.deviceConfigAdd, 'image', res.showUrl)
        this.$set(this.deviceConfigAdd, 'configPicture', res.insertUrl)
      } else {
        this.$message.error(res.msg || this.translate('scsb'))
      }
    },
    // 裁剪确定按钮
    cropperSubmit (config) {
      // preImg 完整路径  urlPre 不包含域名
      if (config.success) {
        this.$set(this.deviceConfigAdd, 'image', config.showUrl)
        this.$set(this.deviceConfigAdd, 'configPicture', config.insertUrl)
        this.dialogCropperVisible = false
      } else {
        this.$message.error(config.msg || this.translate('scsb'))
        this.dialogCropperVisible = false
      }
    },
    // 裁剪取消
    cropperClose () {
      this.dialogCropperVisible = false
    },
    async addFileChange (file, fileList) {
      // 上传，拿到file文件
      // this.files = file.raw;
      this.$nextTick(() => {
        this.optionImg = URL.createObjectURL(file.raw)
        this.fileinfo = file.raw
        this.dialogCropperVisible = true
      })
    },
    // 删除场馆设施已上传图片
    deleteDeviceConfigAddImage () {
      this.$set(this.deviceConfigAdd, 'image', '')
      this.$set(this.deviceConfigAdd, 'configPicture', '')
    },
    // 新增场馆设施配置
    toVenueConfigAdd () {
      const { deviceConfigAdd } = this
      if (!deviceConfigAdd.configName) {
        this.$message.info(this.translate('qsrmc3'))
        return false
      }
      if (!deviceConfigAdd.configPicture) {
        this.$message.info(this.translate('qsctp'))
        return false
      }
      const param = {
        name: deviceConfigAdd.configName,
        value: deviceConfigAdd.configPicture,
        type: '3'
      }
      configAdd({ param }).then((res) => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('addcg'))
        this.getConfigList()
        this.deviceConfigAdd = {
          configName: '',
          configPicture: ''
        }
      })
    },
    // 删除场馆设施配置
    toVenueConfigDelete (id) {
      this.$confirm(this.translate('configDelPlace'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configDelete({ param: { id } }).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            this.getConfigList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.translate('canceledDel')
          })
        })
    },
    // 修改默认密码
    toUpdateDefaultPassword (e) {
      const param = {
        id: this.defaultPasswordConfig[0].id,
        value: this.defaultPasswordConfig[0].value,
        type: e
      }
      let str = this.translate('editPsdPlace')
      if (e === 11) {
        str = this.translate('editKefuPhoneP')
      }
      if (e === 4) {
        if (!this.defaultPasswordConfig[0].value) {
          this.$message.info(this.translate('initPsdPlace'))
          return false
        }
        if (
          this.defaultPasswordConfig[0].value.length < 8 ||
          this.defaultPasswordConfig[0].value.length > 20
        ) {
          this.$message.info(this.translate('psdLengthP'))
          return false
        }
        var reg = /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,20}$/
        if (!reg.test(this.defaultPasswordConfig[0].value)) {
          this.$message.info(
            this.translate('psdRule1')
          )
          return false
        }
      }
      this.$confirm(str, this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configUpdate({ param }).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('editScs'))
            this.getConfigList()
          })
        })
        .catch(() => {
          console.log(this.translate('cancelEditEd'))
        })
    },
    // 添加通用消费配置操作
    toGeneralConsumptionAdd () {
      this.showGeneralConsumptionAdd = true
    },
    // 新增通用消费配置
    confirmGeneralConsumptionAdd () {
      const { generalConsumptionAdd: param } = this

      if (!param.name) {
        return this.$message.error(this.translate('qsrtyxflx'))
      }
      this.commonConsumeLoading = true
      configAdd({ param }).then((res) => {
        this.commonConsumeLoading = false
        this.generalConsumptionAdd.name = ''
        this.showGeneralConsumptionAdd = false
        if (res.errorCode !== '000000') return
        this.getConfigList()
      })
    },
    // 删除通用消费配置
    toGeneralConsumptionDelete (id) {
      this.$confirm(this.translate('xfpzDelPlace'), this.translate('ts'), {
        confirmButtonText: this.translate('qd'),
        cancelButtonText: this.translate('cancel'),
        type: 'warning'
      })
        .then(() => {
          configDelete({ param: { id } }).then((res) => {
            if (res.errorCode !== '000000') return
            this.$message.success(this.translate('delScs'))
            this.getConfigList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: this.translate('canceledDel')
          })
        })
    },
    handleClickb (tab) {
      this.tabName = tab.name
    },

    // 切换tab
    handleClick (tab) {
      this.configCode = ''
      switch (tab.name) {
        case 'first':
          this.configType = 1
          this.configName = 'holidayConfigList'
          break

        case 'second':
          this.configType = 2
          this.configName = 'payConfigList'
          this.getVenue()
          break

        case 'third':
          this.configType = 3
          this.configName = 'deviceConfigList'
          break

        case 'fourth':
          this.configType = 4
          this.configName = 'defaultPasswordConfig'
          break
        case 'six':
          this.configType = 11
          this.configName = 'defaultPasswordConfig'
          break
        case 'fifth':
          this.configType = 72
          this.configName = 'generalConsumptionConfigList'
          break
        case 'seven':
          this.configType = 15
          this.configCode = ''
          break
        default:
          this.$message.error(this.translate('getConfigErr'))
          break
      }
      // debugger
      this.pagination = {
        firstQueryTime: new Date(),
        page: 1,
        rows: 10
      }
      this.page = 1
      this.getConfigList()
    },

    onSubmit (item) {
      console.log(item)
      if (!item.value) return this.$message.warning(this.translate('qxsrnr'))
      const param = {
        code: item.code,
        value: item.value,
        type: item.type,
        id: item.id
      }
      configUpdate({ param }).then((res) => {
        if (res.errorCode !== '000000') return
        this.$message.success(this.translate('tjScs'))
        this.getConfigList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.device-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  &::after {
    content: "";
    width: calc((100% - 90px) / 4);
  }

  .holder {
    width: calc((100% - 90px) / 4);
  }

  .device-item {
    padding: 20px;
    background-color: #f7f7f7;
    margin-bottom: 20px;
    display: flex;
    box-sizing: border-box;
    width: calc((100% - 90px) / 4);

    .device-uploader {
      width: 80px;
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #fff;
      cursor: pointer;
      border: 1px dashed #ccc;
      border-radius: 8px;
      transition: all 0.3s;
      &:hover {
        border-color: $menuActive;
        .uploader-icon {
          color: $menuActive;
        }
      }
      ::v-deep .el-upload {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .file {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          background-size: contain;
          background-position: center;
          background-repeat: no-repeat;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          .delete {
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            display: none;
            align-items: center;
            justify-content: center;
            .icon {
              color: #fff;
            }
          }
          &:hover {
            .delete {
              display: flex;
            }
          }
        }
      }
      .uploader-icon {
        color: #aaaaaa;
        font-size: 22px;
        transition: all 0.3s;
      }
    }

    .name {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: flex-end;
      padding-left: 10px;
      box-sizing: border-box;
      .value {
        align-self: flex-start;
        font-weight: bold;
        font-size: 15px;
      }
    }
    .image {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      background-repeat: no-repeat;
      background-size: contain;
      background-position: center;
    }
  }
}
.placeholder9 {
  line-height: 20px;
}
.default-password-form {
  width: 300px;
}
::v-deep .ql-container {
  height: 500px;
}
</style>
